<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>试卷管理</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <link rel="stylesheet" href="../css/all.css">
    <style>

    </style>
</head>
<body>

<div id="app" v-cloak>

    <div >
        <h3>试卷列表</h3>
        <div>
            <button type="button" class="btn" @click=" isShowExamDialog = true " >创建考试</button>
            <button type="button" class="btn btn-primary" @click="doStartExam" >开始考试</button>
            <button type="button" class="btn btn-warning" @click="doFinishExam" >结束考试</button>
            <button type="button" class="btn btn-info" @click="doExamRanking" >统计排名</button>
            <button type="button" class="btn btn-danger" @click=" doRemoveExam " >删除</button>
        </div>
        <hr>
        <table class="table">
            <thead>
            <tr>
                <th>选择(编号)</th>
                <th>试卷名称</th>
                <th>考试码</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>题目</th>
                <th>参与学生</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(exam,index) in pageInfo.list" >
                <td>
                    <label class="form-checkbox">
                        <input type="checkbox" name="examPaper" class="checkbox" :value="exam.id" v-model="checkedExamArr" >
                        <div class="checkbox-item">{{exam.id}}</div>
                    </label>
                </td>
                <td>{{exam.name}}</td>
                <td>{{exam.code}}</td>
                <td>
                    <!-- 1已创建, 2考试中, 3考试结束, 4已统计排名, -1已删除 -->
                    <span v-if="exam.status == 1" >已创建</span>
                    <span v-else-if="exam.status == 2" >考试中</span>
                    <span v-else-if="exam.status == 3" >考试结束</span>
                    <span v-else-if="exam.status == 4" >已统计排名</span>
                    <span v-else-if="exam.status == -1" >已删除</span>
                    <span v-else >未知</span>
                </td>
                <td>{{exam.createDate}}</td>
                <td>
                    <a v-if="exam.status == 1" :href=" baseUrl + '/manage/examQuestionManage.html?examPaperId=' + exam.id " target="_blank" >详情</a>
                </td>
                <td>
                    <a v-if="exam.status == 1 || exam.status == 2" >结束后查看</a>
                    <a v-else :href=" baseUrl + '/manage/stuExamManage.html?examPaperId=' + exam.id " target="_blank">详情</a>
                </td>
            </tr>
            <tr v-if="pageInfo.pages == 0">
                <td colspan="6" style="color: #5d9cec;font-size: 20px;cursor: pointer" @click="doGoPage(0)" >暂无数据, 点击刷新</td>
            </tr>
            </tbody>
        </table>
        <hr>
        <div class="page-list" >
            <a @click="doGoPage(-1)" class="page-item" v-if="pageInfo.pageNum > 1" >
                <span>&lt;&lt;</span>
            </a>

            <a :class=" 'page-item' + (num == pageInfo.pageNum ? ' item-active' : '') " @click="doGoPage(num - pageInfo.pageNum)" v-for=" (num) in pageInfo.navigatepageNums " >
                <span>{{num}}</span>
            </a>

            <a @click="doGoPage(1)" class="page-item" v-if="pageInfo.pageNum < pageInfo.pages" >
                <span>&gt;&gt;</span>
            </a>
        </div>
    </div>

    <div v-if="isShowExamDialog" class="dialog-box" @click.self=" isShowExamDialog = false ">
        <div class="dialog-content" >
            <div class="dialog-close" @click=" isShowExamDialog = false " >
                <svg t="1666015662867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="876" width="30" height="30">
                    <path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" p-id="877"></path>
                    <path d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955" p-id="878"></path>
                    <path d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993" p-id="879"></path>
                </svg>
            </div>
            <div class="dialog-head" >
                创建考试
            </div>
            <div class="dialog-body" >
                <form id="examForm" class="center-form80">
                    <div class="form-item">
                        <label class="form-label">考试名称:</label>
                        <input class="form-input" type="text" v-model="examName">
                    </div>
                    <div class="form-item text-center">
                        <button type="button" class="btn" @click=" isShowExamDialog=false; examName=''; " >重&nbsp;置</button>
                        <button type="button" class="btn btn-primary" @click=" doCreateExam " >确&nbsp;定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            baseUrl: baseUrl,
            isShowExamDialog: false,
            examName: '',
            checkedExamArr: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 5,
                pages: 0,
                list: [],
                navigatepageNums: []
            }
        },
        beforeMount() {
            this.doGoPage(0);
        },
        watch: {
            checkedExamArr: {
                handler: function (newVal, oldVal) {
                    // console.log('newVal:', newVal, 'oldVal:', oldVal);
                    if(newVal.length > 1) {
                        newVal.shift();// 确保 只能选择一个
                    }
                },
                immediate: false
            }
        },
        methods: {
            doGoPage(num) {
                let pageInfo = this.pageInfo;
                let newPageNum = pageInfo.pageNum + num;
                if(newPageNum != 1) {
                    if(newPageNum < 1 || newPageNum > pageInfo.pages) {
                        return;
                    }
                }
                // loadData
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/findExamsByPage",
                    data: {
                        pageNum: newPageNum,
                        pageSize: pageInfo.pageSize
                    },
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.pageInfo = data;
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doCreateExam(){
                if(!this.examName || !this.examName.trim()) {
                    toastr.warning('考试名称不能为空');
                    return;
                }
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/createExam",
                    data: { examName: this.examName },
                    dataType: 'json',
                    success: ({msg, success}) => {
                        toastr[ success?'success':'warning' ](msg);
                        if(success) {
                            this.doGoPage(0);// 重新加载
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doStartExam() {
                //console.log('doStartExam', this.checkedExamArr);
                let examPaperId = this.checkedExamArr[0];
                if(!examPaperId) {
                    toastr.warning("请选择试卷！");
                    return;
                }
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/startExam",
                    data: { examPaperId: examPaperId },
                    dataType: 'json',
                    success: ({msg, success}) => {
                        toastr[ success?'success':'warning' ](msg);
                        if(success) {
                            this.doGoPage(0);// 重新加载
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doFinishExam() {
                let examPaperId = this.checkedExamArr[0];
                if(!examPaperId) {
                    toastr.warning("请选择试卷！");
                    return;
                }
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/finishExam",
                    data: { examPaperId: examPaperId },
                    dataType: 'json',
                    success: ({msg, success}) => {
                        toastr[ success?'success':'warning' ](msg);
                        if(success) {
                            this.doGoPage(0);// 重新加载
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doExamRanking() {
                let examPaperId = this.checkedExamArr[0];
                if(!examPaperId) {
                    toastr.warning("请选择试卷！");
                    return;
                }
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/examRanking",
                    data: { examPaperId: examPaperId },
                    dataType: 'json',
                    success: ({msg, success}) => {
                        toastr[ success?'success':'warning' ](msg);
                        if(success) {
                            this.doGoPage(0);// 重新加载
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doRemoveExam() {
                // TODO: doRemoveExam
                toastr.info("尽请期待...");
            }
        }
    });
</script>
</body>
</html>